<template>
  <div id="searchRow">
    <el-row type="flex" justify="end">
      <span v-for="term in terms">
        <el-date-picker v-if="term.datePicker" v-model="example[term.code]" :value-format="term.valueFormat"
          :type="term.type" :class="term.claze ? term.claze : 'query-medium'" :placeholder="term.desc"></el-date-picker>
        <el-select v-if="term.dict" v-model="example[term.code]" :class="term.claze ? term.claze : 'query-medium'"
          :placeholder="term.desc" filterable clearable>
          <el-option v-for="(val, key, i) in $store.state.dict[term.dict]" :key="key" :value="key" :label="val" />
        </el-select>
        <el-input v-if="!term.datePicker && !term.dict" v-model="example[term.code]"
          :class="term.claze ? term.claze : 'query-medium'" :placeholder="term.desc" clearable />
      </span>
      <el-button type="primary" icon="el-icon-search" @click="query(1)" v-if="queryAble"> 查询 </el-button>
      <el-button type="success" icon="el-icon-plus" @click="add()" v-if="addAble"> 添加{{name}} </el-button>
    </el-row>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop
  } from "vue-property-decorator";

  @Component
  export default class SearchRow extends Vue {

    @Prop({
      type: Object
    }) example;

    @Prop({
      type: String
    }) name;

    @Prop({
      type: Array
    }) terms;

    @Prop({
      type: Boolean
    }) queryAble;

    @Prop({
      type: Boolean
    }) addAble;

    created() {} //生命周期 - 创建完成（可以访问当前this实例）
    mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} //生命周期 - 创建之前
    beforeMount() {} //生命周期 - 挂载之前
    beforeUpdate() {} //生命周期 - 更新之前
    updated() {} //生命周期 - 更新之后
    beforeDestroy() {} //生命周期 - 销毁之前
    destroyed() {} //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

</style>
